<script setup lang="ts">

</script>

<template>
  <div class="relative overflow-hidden p-5 flex-1 vipPrivilege rounded-xl">
    <img class="absolute -top-9 -right-2" src="@/assets/vip/vipLogo.svg" alt="vipLogo">
    <div class="flex gap-1 items-center">
      <img class="w-6 h-6" src="@/assets/vip/vipLevel.svg" alt="vipLevel">
      <h2 class=" text-primary m-0 relative z-10">成为会员尊享专属特权</h2>
    </div>
    <div class="w-full mt-5 left-0 top-0 relative z-10">
      <div class="bg-white rounded-xl p-5 grid grid-cols-3 shadow-xl text-center">
        <div class="intro">
          <img src="@/assets/vip/tutorIcon.svg" alt="tutorIcon">
          社区资源免费
        </div>
        <div class="intro">
          <img src="@/assets/vip/teacherIcon.svg" alt="teacherIcon">
          社区专属答疑
        </div>
        <div class="intro">
          <img src="@/assets/vip/messageIcon.svg" alt="messageIcon">
          VIP 专属交流群
        </div>
        <div class="intro">
          <img src="@/assets/vip/vipIcon.svg" alt="vipIcon">
          全站VIP标识
        </div>
        <div class="intro">
          <img src="@/assets/vip/playIcon.svg" alt="playIcon">
          全站视频免费看
        </div>
        <div class="intro">
          <img src="@/assets/vip/resumeIcon.svg" alt="resumeIcon">
          优先处理个人工单
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.vipPrivilege {
  height: 250px;
  background: linear-gradient(180deg, #cce5fd, rgba(225, 225, 225, 0.3));
  border: 1px solid #fff;

  .intro {
    border-right: 1px solid #cee5fd;
    border-bottom: 1px solid #cee5fd;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 1rem .5rem;

    &:nth-child(3n) {
      border-right: none;
    }

    &:nth-child(n+4) {
      border-bottom: none;
    }
  }
}

@media (min-width: 768px) {
  .vipPrivilege .intro {
    flex-direction: row;
    white-space: nowrap;
  }
}

@media (min-width: 1024px) {
  .vipPrivilege .intro {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
</style>
